// import React, { Fragment, Component } from "react";
//! 在react里面解构的东西，首字母大写的是组件，首字母小写的是方法
import React, { Component } from "react";
import Button from "./Button";

// 用函数组件的方式创建头部组件
const Header = () => {
  return <header>这是头部组件</header>;
};

// const Button = () => {
//   return <button>按钮</button>;
// };

// 用类组件创建内容组件
class Content extends Component {
  render() {
    return (
      <main>
        这是内容组件 - <Button />
      </main>
    );
  }
}

class App extends Component {
  render() {
    return (
      //! 组件必须有一个根元素
      //! 组件不需要注册的
      //! Fragment表示空的占位标签
      <>
        <h2>组件组合和嵌套</h2>
        <Header />
        <Content />
      </>
    );
  }
}

export default App;
